import { Input } from 'antd';
import React from 'react';

const { TextArea } = Input;

interface TemplateTextAreaProps {
  value?: string;
  maxLength: number;
  placeholder: string;
  lineBreakSymbol: string;
  autoSize: { minRows: number; maxRows: number };
  onChange?: (value: string) => void;
}

export default function TemplateTextArea(
  props: TemplateTextAreaProps
): JSX.Element {
  const { value, lineBreakSymbol, onChange, ...otherProps } = props;

  const regex = new RegExp(lineBreakSymbol, 'g');
  const realValue = (value as string).replace(regex, '\n');

  const handleValueChange = (event): void => {
    const value = event.target.value;
    onChange((value as string).replace(/\n/g, lineBreakSymbol));
  };

  return (
    <TextArea value={realValue} onChange={handleValueChange} {...otherProps} />
  );
}
